<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;

        }

        body,
        html {
            background-color: #ccc;
        }

        #bigBox {
            width: 400px;
            margin: 0 auto;
            border: 5px solid #fff;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
        }

        li {

            width: 100px;
            line-height: 100px;
            text-align: center;
            box-sizing: border-box;
            border: 5px solid #fff;
            background-color: #000;
            color: #fff;
        }

        #bom {
            width: 400px;
            background-color: #000;
            color: #fff;
            box-sizing: border-box;
            border: 5px solid #fff;
            line-height: 80px;
        }

        .aa {
            background-color: #f00;
            color: #fff;
        }

        .bb {
            display: block;
        }

        p {
            display: none;
        }
    </style>
</head>

<body>
    <div id="bigBox">
        <ul id="top">
            <li class="aa">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>

        <div id="bom">
            <p class="bb">111111111111111111111111</p>
            <p>2222222222222222222222222</p>
            <p>33333333333333333333</p>
            <p>44444444444444444444444</p>
            <p>55555555555555</p>
            <p>666666666666666</p>
            <p>777777777777777</p>
            <p>8888888888888888</p>
            <p>99999999999999999999</p>
            <p>101010101010101</p>
            <p>11</p>
            <p>1212121212121212</p>
        </div>
    </div>
</body>

<script>
    var li = document.querySelectorAll('li')
    var p = document.querySelectorAll('p')

    for (var i = 0; i < li.length; i++) {
        li[i].index = i

        li[i].onmouseover = function () {
            for (var n in li) {
                li[n].className = ''
            }
            this.className = 'aa'
            for (var c in p) {
                p[c].className = ''
            }
            p[this.index].className = 'bb'
        }
    }

</script>

</html>